<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        {{myname}}
        <button @click="handleClick">click</button>
        <child v-if="isCreated"></child>
    </div>

    <script type="text/javascript">
        Vue.component("child", {
            template:`
            <div>child</div>
            `,
            mounted(){
                window.onresize = function(){
                    console.log("resize-111111")
                }
            },
            destroyed() {
                window.onresize = null
            }
        })

        var vm = new Vue ({
        el:"#box",
        data: {
            myname:"kerwin",
            isCreated:true
        },
        
        methods:{
            handleClick(){
                this.myname = "张三"

                //状态修改后，异步更新DOM
                // var obox = document.getElementById('box')
                // console.log(obox.innerHTML)
            }
        },

        beforeCreate() {    // beforeCreate时get、set并未开始工作无法获取到值
            console.log("beforeCreate", this.myname)
        },
        created() {  // create时可以访问到值，并且可以修改状态
            this.myname = "1111" + this.myname
            console.log("created", "初始化", this.myname)
        },

        beforeMount() {     //DOM挂载之前，此时也可以进行状态修改(最后一次修改)
            this.myname = "2222" + this.myname
            console.log("beforeMount", "DOM挂载前")
        },
        mounted(){      // 重要的钩子，此时DOM已经完成创建并且可以访问DOM
            console.log("mounted", "DOM挂载完成,访问DOM", "监听事件,ajax设置定时器")
        },

        beforeUpdate() {
            console.log("beforeUpdate")
        },
        updated() {
            console.log("updated", "获取到更新后得到DOM")
            var obox = document.getElementById('box')
            console.log("2222222", obox.innerHTML)
        },

        beforeDestroy() {
            console.log("beforeDestroy")
        },
        destroyed() {
            console.log("destroyed")
        },
    })

    </script>
    
</body>
</html>